<template>
  <div  class="aside-nav" style="background-color:#545c64" :style="{width:width + 'px'}">
    <div class="text-right" >
      <i class="fa font-lg collapse" :class="direction" style="color: white;padding: 10px 20px 0 0" @click="toggleCollapse"></i>
    </div>
    <el-menu
      ref="menu"
      :default-active="activeIndex"
      background-color="#545c64"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
      :collapse-transition="false"
      :router="true"
      :collapse="isCollapse"
      active-text-color="#ffd04b">
      <el-menu-item index="/home/index">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item>
        <i class="fa fa-address-book"></i>
        <span slot="title">考试信息管理</span>
      </el-menu-item>
      <el-menu-item index="/home/testQues">
        <i class="fa fa-book"></i>
        <span slot="title">试题库</span>
      </el-menu-item>
      <el-menu-item index="/home/testPaper">
        <i class="fa fa-file-text-o"></i>
        <span slot="title">试卷库</span>
      </el-menu-item>
      <!--<el-menu-item Index="5">-->
        <!--<i class="fa fa-check-circle-o"></i>-->
        <!--<span slot="title">成绩查询批改</span>-->
      <!--</el-menu-item>-->
      <!--<el-menu-item Index="6">-->
        <!--<i class="fa fa-search"></i>-->
        <!--<span slot="title">分析考试</span>-->
      <!--</el-menu-item>-->
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'AsideNav',
  data () {
    return {
      activeIndex: window.location.pathname,
      isCollapse: false,
      direction: 'fa-angle-double-left',
      widthPre: this.width
    }
  },
  props: {
    width: {
      default: 200,
      type: Number
    }
  },
  model: {
    prop: 'width',
    event: 'collapse'
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    toggleCollapse () {
      let width
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.direction = 'fa-angle-double-right'
        width = 64
      } else {
        this.direction = 'fa-angle-double-left'
        width = this.widthPre
      }
      this.$emit('collapse', width)
    }
  }
}
</script>

<style scoped lang="less">

  .collapse{
    &:hover{
      cursor: pointer;
    }
  }
</style>
